import Vue from 'vue'
import app from './App.vue'

// 导入 vuex
import Vuex from 'vuex'
Vue.use(Vuex)

var car = JSON.parse(localStorage.getItem('car') || '[]')
var store = new Vuex.Store({
    state: {
        car: car // 购物车数据
    },
    mutations: {
        // 点击添加到购物车，把商品信息保存到 state 中的 car 上
        addToCar(state, goodsMsg) {

            // 假设 购物车中没有这个商品
            var flag = false;
            // 循环， 如果购物车中已经有了，那么，购物车中的数量就加上新的数量
            state.car.some(item => {
                if (item.id == goodsMsg.id) {
                    item.count += parseInt(goodsMsg.count);
                    flag = true;
                    return true; // 终止 some 循环
                }
            })
            if (flag == false) {
                state.car.push(goodsMsg);
            }

            localStorage.setItem("car", JSON.stringify(state.car))
        },
        // 修改购物车商品的数量值
        updateGoodsInfo(state, goodsinfo) {
            // 循环，找到商品对应的 id 将新的数量覆盖到原来的数据
            state.car.some(item => {
                if (item.id === goodsinfo.id) {
                    item.count = goodsinfo.count;
                    return true
                }
            })
            localStorage.setItem("car", JSON.stringify(state.car))
        },
        // 删除购物车内商品
        removeFormCar(state, id) {
            state.car.some((item, i) => {
                if (item.id == id) {
                    state.car.splice(i, 1)
                    return true
                }
            })
            localStorage.setItem("car", JSON.stringify(state.car))

        },
        // 更新购物车商品选中状态
        updateGoodsSelected(state, info) {
            state.car.some(item => {
                if (item.id == info.id) {
                    item.selected = info.selected
                    return
                }
            })
            localStorage.setItem("car", JSON.stringify(state.car))
        }
    },
    getters: {
        // 获取购物车总共几件商品
        getAllCount(state) {
            var temp = 0;
            state.car.forEach(item => {
                temp += item.count
            })
            return temp
        },
        // 获取每件商品有多少件，并放到一个对象里，这样通过 .id名 就能拿到
        getGoodsCount(state) {
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.count
            })
            return o
        },
        // 获取商品是否被选中
        getGoodsSelected(state) {
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.selected
            })
            return o;
        },
        getGoodsCountAndAmount(state) {
            var o = {
                count: 0,
                amount: 0
            }
            state.car.forEach(item => {
                if (item.selected == true) {
                    o.count += item.count
                    o.amount += item.price * item.count
                }
            })
            return o
        }
    }
})

// 导入 router 的包
import VueRouter from 'vue-router'
// 安装 路由 
Vue.use(VueRouter)
// 导入自己的路由模块
import router from './router.js'

// 导入 vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.root = 'http://www.liulongbin.top:3005';
Vue.http.options.emulateJSON = true;

import moment from 'moment'
Vue.filter('dateFormat', function (dateStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(dateStr).format(pattern)
})

// 引入 mui 
import './lib/mui/css/mui.min.css'
// mui 的 扩展 icons
import './lib/mui/css/icons-extra.css'

// 引入 全部的 mint - UI
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)
// with parameters install


// 按需导入 -- 
// Header 区域
// import {
//     Header, // 头部
//     Swipe,
//     SwipeItem,
//     Button, // 按钮
//     Lazyload, // 图文列表用到的懒加载
// } from 'mint-ui'
// Vue.component(Header.name, Header)
// Vue.component(Button.name, Button)
// Vue.use(Lazyload);
// // 轮播图 所需的 mintUI
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
import {
    MessageBox
} from 'mint-ui'
MessageBox('提示', '这是手机页面，请用手机模式浏览');

var vm = new Vue({
    el: "#app",
    render: function (c) {
        return c(app)
    },
    router,
    store
    // components: {
    //     app
    // }
})